<template>
	<view>
		<view class="" style="color: red;background-color: #fff88e;padding: 10rpx;text-align: center;font-size: 26rpx;">
			未配置额度诊所将不可下单，分配额度后可下单
		</view>
		<view class="" style="width: 100%;">
				
				<view class="proitem cc" v-for="(item,index) in list">
					<view class="" style="display: flex;flex-direction: column;" >
						<view class="" style="font-weight: bold;">
							{{item.name}}
						</view>
						<view class="">
							<view class="bt">
								<view class="">
									设备类型
								</view>
								<view class="">
									{{item.device_type_text}}
								</view>
							</view>
							<view class="bt">
								<view class="">
									检测样本
								</view>
								<view class="">
									{{item.sample}}
								</view>
							</view>
						</view>
						<view class="">
							<view class="bt">
								<view class="text-ellipsis-2">
									{{item.significance}}
								</view>
		
							</view>
						</view>
						<view class="">
							<view class="bt">
								<view class="" style="color: red;font-size: 30rpx;">
									价格：￥{{item.price}}
								</view>
								<view class="" style="display: flex;">
									<view class="jj" @click="jia(index,2)">
										-
									</view>
									<view class="jj2">
										<input type="text" v-model="item.stock" placeholder="库存" style="width: 80rpx;text-align: center;background: #fff;border-radius: 5rpx;"/>
										<!-- {{item.stock}} -->
									</view>
									<view class="jj" @click="jia(index,1)">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		
		
			
		</view>
		<view class="" style="height: 150rpx;"> 
			
		</view>
		<view class="btns" @click="savedata">
			保存配置
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clinic_id:'',
				list:[]
			}
		},
		onLoad(options) {
			console.log(options)
			this.clinic_id = options.clinic_id
			this.getList()
		},
		methods: {
			savedata(){
				
				var that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
				    url: that.global.url + 'api/reagent/savedata',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {
						clinic_id: that.clinic_id,
						list:JSON.stringify(that.list)
					},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							uni.showToast({
								title: result.msg,
								icon: 'success'
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    },complete() {
				    	uni.hideLoading()
				    }
				})
			},
			getList(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/reagent/index',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {
						clinic_id: that.clinic_id
					},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.list = result.data
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    }
				})
			},
			jia(index, type) {
				
				if (type == 1) {
					
					this.list[index]['stock']++
					// this.choice_id = this.choice_id.concat(this.drug_list[index].id)
				} else {
					if (this.list[index]['stock'] <= 0) {
						return false;
					}
				
					this.list[index]['stock']--
					
				}
				
			},
		},
		
	}
</script>

<style>
	.btns{
		width: 90%;
		position: fixed;
		bottom: 10px;
		left: 9px;
		border-radius: 10px;
		padding: 20rpx;
		text-align: center;
		margin: 0px auto;
		background-color: #1262DB;
		color: #fff;
	}
.fl {
		display: flex;
	}
	
	.tb {
		width: 38rpx;
		height: 40rpx
	}

	.xian {
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.title {
		margin-left: 20rpx;
		width: 300rpx;
		font-weight: bold
	}

	.left-item {
		width: 100%;
		height: 50px;
		background: #e5e5e5;
		text-align: center;
		line-height: 50px;
	}

	.choice {
		width: 100%;
		height: 50px;
		background: #fff;
		text-align: center;
		line-height: 50px;
	}

	.cc {
		width: 82%;
		margin: 0px auto;
		margin-top: 20rpx;
		padding: 21rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		box-shadow: 1px 1px 4px 1px #ccc;
	}

	.bt {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #b5b5b5;
		margin-top: 10rpx;
	}

	.jj {
		padding: 5rpx 15rpx;
		font-size: 30rpx;
		color: #000;
		background-color: #e5e5e5;
		margin: 0px 3px 0px 3px;

	}
	.jj2 {
		padding: 5rpx 15rpx;
		font-size: 30rpx;
		color: #000;
		border: 1px solid #ccc;
		margin: 0px 3px 0px 3px;
	
	}

	.sub_box {
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		height: 150rpx;
		left: 0px;
		right: 0px;
		border-top: 1px solid #ccc;
	}

	.sub_btn {
		background-color: #00c500;
		color: #fff;
		width: 90%;
		margin: 0px auto;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 20rpx
	}
	.sub_btn2{
		background-color: #00c500;
		color: #fff;
		width: 90%;
		margin: 0px auto;
		text-align: center;
		margin-top: 20rpx;
		padding: 0rpx;
	}
	.text-ellipsis-2 {
	  display: -webkit-box;      /* 使用Webkit的盒子模型 */
	  -webkit-line-clamp: 2;     /* 限制最多显示2行 */
	  -webkit-box-orient: vertical; /* 设置盒子内容的排列方向为垂直 */
	  overflow: hidden;         /* 隐藏超出容器的内容 */
	  text-overflow: ellipsis;  /* 使用省略号表示被截断的文本 */
	}
</style>
